<template>
<p>Progress 组件设置 <code>percentage</code> 属性即可，表示进度条对应的百分比。 该属性<strong>必填</strong>，并且必须在 <code>0-100</code> 的范围内。 你可以通过设置 <code>format</code> 来自定义文字显示的格式。</p>
  <div class="demo-progress">
    <el-progress :percentage="50" />
    <el-progress :percentage="100" :format="format" />
    <el-progress :percentage="100" status="success" />
    <el-progress :percentage="100" status="warning" />
    <el-progress :percentage="50" status="exception" />
  </div>
</template>

<script lang="ts" setup>
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<style scoped>
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
</style>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>